<template>
  <div class="UserLists">
    <el-table :data="UserLists" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="ID" width="60" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="微信头像" width="120" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <img :src="scope.row.user_facephoto" alt="用户照片" style="width:60px;height:60px">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="110" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.user_name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="70" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.user_sex }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="电话号码" width="130" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.user_phonenumber }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.user_card }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="入住时间" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.livetime }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="入住地点" header-align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.user_address }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作"  align="center">
        <template slot-scope="scope">
          <el-button size="medium" type="success" @click="UserEdit(scope.row)">编辑</el-button>
          <el-button size="medium" type="danger" @click="UserDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
    <!-- 确认删除 -->
    <el-dialog :visible.sync="deleteDataFrom">
      <el-form
        ref="dataForm"
        :rules="rules"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <span>确定删除这一条吗？</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deleteDataFrom = false">取消</el-button>
        <el-button type="primary" @click="deleteData">确定删除</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
import residentData from '../residentData'
import { getToken, getAccount } from '@/utils/auth'
export default {
  components: {
    residentData
  },
  data() {
    return {
      dataForm: '',
      UserLists: [],
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageCount: 1,
      pageNum: 1, // 页数
      total: 0,
      temp: {
        user_name: '',
        user_sex: '',
        user_card: '',
        user_facephoto: '',
        user_id: '',
        user_livetime: '',
        user_phonenumber: '',
        user_address: ''
      },
      deleteDataFrom: false,
      rules: {}
    }
  },
  // 钩子函数
  created() {
    this.getUserList()
  },
  methods: {
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getUserList()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getUserList()
    },
    // 获取用户列表
    getUserList() {
      return request({
        url: '/v3/user/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: {
          current_page: this.currentPage,
          page_size: this.pagesize,
          user_id: 0
        }
      }).then(res => {
        var userLists = res.userLists
        this.currentPage = res.current_page
        this.pageNum = res.pages
        this.total = res.total_record
        this.UserLists = []
        userLists.map((value, index) => {
          this.temp.timestamp = value.user_livetime
          // 转换时间格式
          var time = value.user_livetime
          var d = new Date(time)
          var times =
            d.getFullYear() +
            '年' +
            (d.getMonth() + 1) +
            '月' +
            d.getDate() +
            '日' +
            d.getHours() +
            '时' +
            d.getMinutes() +
            '分' +
            d.getSeconds() +
            '秒'
          this.UserLists.push({
            user_id: value.user_id,
            user_name: value.user_name,
            user_facephoto: value.user_facephoto,
            user_address: value.user_address,
            user_sex: value.user_sex,
            user_card: value.user_card,
            user_phonenumber: value.user_phonenumber,
            livetime: times,
            user_livetime: value.user_livetime
          })
        })
        return res
      })
    },
    // 修改用户数据
    UserEdit(row) {
      this.temp = Object.assign(row)
      this.$router.push({ name: '编辑住户信息', params: { data: this.temp }})
    },
    // 删除用户数据
    UserDelete(row) {
      this.deleteDataFrom = true
      this.temp = {
        user_id: row.user_id
      }
    },
    // 确定删除
    deleteData() {
      return request({
        url: '/v3/user/delete',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        if (res.tip === '成功.') {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 0.5 * 1000
          })
          this.deleteDataFrom = false
          this.$router.go(0) // 刷新页面
        }
      })
    }
    // //添加用户
    // creat() {
    //   this.temp = {
    //     user_name: "",
    //     user_sex: "",
    //     user_card: "",
    //     user_facephoto: "",
    //     user_id: "",
    //     user_livetime: "",
    //     user_phonenumber: "",
    //     user_address: ""
    //   };
    //   this.$router.push({ name: "编辑住户信息", params: { data: this.temp } });
    // }
  }
}
</script>
<style lang="scss" scoped>
.UserLists {
  margin-top: 50px;
  overflow: hidden;
  .UserLists_nav {
    height: 60px;
    width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 20px;
  }
}
</style>
